<template>
  <div class="hello">
    <el-row
      style="
        font-size: 22px;
        font-weight: 600;
        padding-left: 30px;
        padding-right: 10px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        height: 80px;
      "
    >
      <el-col :span="18">
        警告信息：<span style="font-size: 24px; color: red">{{ warningMessage }}</span>
      </el-col>
      <el-col :span="6">
        <div style="margin-left: -20px">
          您有{{ renwuList.length }}条任务待领取
          <span style="color: blue; cursor: pointer; font-weight: 600" @click="chakan()"
            >查看></span
          >
        </div>
      </el-col>
    </el-row>
    <div class="staffInfo">
      <div class="left">
        <p class="caption">员工信息</p>
        <div class="items">
          <p class="flx1">操作工: <span>张三</span></p>
          <p class="flx1">接单操作工: <span>张三、李四</span></p>
        </div>
      </div>
      <div class="right">
        <el-button v-if="shanggongstatus" type="primary" class="button" @click="shanggong()"
          >上工</el-button
        >
        <el-button v-if="!shanggongstatus" type="primary" class="button" @click="xiagong()"
          >下工</el-button
        >
        <el-button type="primary" class="button" @click="paigong()">派工</el-button>
      </div>
    </div>
    <!-- <el-row>px
      <el-col :span="24">
        <el-divider></el-divider>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-col :span="18"> 员工信息 </el-col>
        <el-col :span="6">
          <el-col :span="12">
            <el-button v-if="shanggongstatus" type="primary" class="button" @click="shanggong()"
              >上工</el-button
            >
            <el-button v-if="!shanggongstatus" type="primary" class="button" @click="xiagong()"
              >下工</el-button
            >
          </el-col>
          <el-col :span="12">
            <el-button type="primary" class="button" @click="paigong()">派工</el-button>
          </el-col>
        </el-col>
        <el-col :span="15" style="margin-top: -10px">
          <el-col :span="16"> &nbsp;操作工:{{ key.userName }} </el-col>
          <el-col :span="8"> 接单操作工:{{ key.caozuogong }} </el-col>
        </el-col>

        <el-col :span="24">
          <el-divider></el-divider>
        </el-col>
      </el-col>
    </el-row> -->
    <el-row type="flex" align="top" style="font-size: 20px; line-height: 45px; font-weight: 700">
      <el-col :span="18" style="padding-left: 10px">
        <el-col :span="24" style="height: 150px">
          生产批次
          <br />
          <el-col :span="18" style="padding-left: 10px">
            当前批次完成情况: {{ shengchanData.key1 }} (已完成数/批次总数)
          </el-col>
          <el-col :span="6">
            调模状态: <span style="color: rgb(99, 135, 71)">{{ shengchanData.key2 }}</span>
          </el-col>
          <el-col :span="10" style="padding-left: 10px">
            模具编号: {{ shengchanData.key3 }}
          </el-col>
          <el-col :span="10"> 模具名称: {{ shengchanData.key4 }} </el-col>
        </el-col>
        <el-col :span="24">
          <el-divider></el-divider>
        </el-col>
        <el-col :span="24">
          当前生产任务
          <br />
          <el-col :span="10" style="padding-left: 10px">
            当前任务单号: {{ shengchanrenwu.key1 }}
          </el-col>
          <el-col :span="14"> 物料名称: {{ shengchanrenwu.key2 }} </el-col>
          <el-col :span="8" style="padding-left: 10px">
            物料编号: {{ shengchanrenwu.key3 }}
          </el-col>
          <el-col :span="8"> 生产任务数: {{ shengchanrenwu.key4 }} </el-col>
          <el-col :span="8"> 生产余数: {{ shengchanrenwu.key5 }} </el-col>
          <el-col :span="8" style="padding-left: 10px">
            当前工序: {{ shengchanrenwu.key6 }}
          </el-col>
          <el-col :span="8"> 合格数量: {{ shengchanrenwu.key7 }} </el-col>
          <el-col :span="8"> 报废数量: {{ shengchanrenwu.key8 }} </el-col>
        </el-col>
      </el-col>
      <el-col :span="4">
        <div class="btn-box">
          <el-button type="primary" class="button2" @click="startshengchan()">开始生产</el-button>
          <el-button type="primary" class="button2" @click="checkrenwu()">查看任务</el-button>
          <el-button type="primary" class="button2" @click="shengchanbaogong()">生产报工</el-button>
        </div>
      </el-col>
    </el-row>
    <!--    <h1> 首页 </h1>-->
    <!--    <el-button type="primary" @click="handleStore">点击存储</el-button>-->
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="false"
      :before-close="handleClose"
    >
      <span slot="title" class="custom-dialog-title">
        {{ title }}
        <i
          class="custom-close-button el-icon-close"
          style="float: right; cursor: pointer"
          @click="handleClose"
        ></i>
      </span>
      <el-row type="flex" align="top" style="font-size: 20px; font-weight: 600">
        <el-col :span="18">
          &nbsp;&nbsp; 员工号：<el-input
            v-model="form.key1"
            placeholder="员工号"
            style="width: 70%; font-size: 20px; font-weight: 600"
          ></el-input>
          <br />
          <br />
          登录密码：<el-input
            v-model="form.key2"
            placeholder="登录密码"
            style="width: 70%; font-size: 20px; font-weight: 600"
          ></el-input>
        </el-col>
        <el-col :span="4" v-if="title !== '派工登录'">
          <el-button
            v-if="shanggongstatus"
            type="primary"
            class="button"
            @click="dialogshanggong()"
            style="margin-top: 20px"
            >上工</el-button
          >
          <el-button
            v-if="!shanggongstatus"
            type="primary"
            class="button"
            @click="dialogxiagong()"
            style="margin-top: 20px"
            >下工</el-button
          >
        </el-col>
        <el-col :span="4" v-else>
          <el-button type="primary" class="button" @click="dialoglogin()" style="margin-top: 20px"
            >登录</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      :show-close="false"
      :visible.sync="dialogVisible2"
      width="50%"
      :before-close="handleClose"
    >
      <span slot="title" class="custom-dialog-title">
        派工
        <i
          class="custom-close-button el-icon-close"
          style="float: right; cursor: pointer"
          @click="handleClose"
        ></i>
      </span>
      <el-row type="flex" align="top" style="font-size: 20px">
        <el-col :span="18">
          &nbsp;&nbsp; 员工号：<el-input
            v-model="paigongform.key1"
            placeholder="员工号"
            style="width: 30%"
          ></el-input>
          <el-button type="primary" class="button2" @click="tianjiayaungong()">添加员工</el-button>
          <br />
          <el-divider></el-divider>
          接单操作工：
          <span v-for="(data, index) in paigongform.userList" :key="index">
            {{ data.userName }}
          </span>
          <el-button type="primary" class="button2" @click="delyaungong()">删除</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" class="button2" style="height: 35vh" @click="querpaigong()"
            >确认派工</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      :show-close="false"
      :visible.sync="dialogVisible3"
      width="100%"
      :before-close="handleClose"
    >
      <span slot="title" class="custom-dialog-title">
        查看加工任务
        <i
          class="custom-close-button el-icon-close"
          style="float: right; cursor: pointer"
          @click="handleClose"
        ></i>
      </span>
      <el-row style="font-size: 20px">
        <el-col :span="14">
          <el-button type="primary" @click="printrenwu()" style="font-size: 20px"
            >打印标识卡</el-button
          >
          <el-button type="primary" @click="quxiaorenwu()" style="font-size: 20px"
            >取消任务</el-button
          >
        </el-col>
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            v-scroll="handleScroll"
            ref="content"
            @selection-change="handleSelectionChange"
            style="overflow: auto; height: 50vh; font-size: 20px"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="key1" label="状态"> </el-table-column>
            <el-table-column prop="key2" label="任务单号"> </el-table-column>
            <el-table-column prop="key3" label="物料编码"> </el-table-column>
            <el-table-column prop="key4" label="物料描述"> </el-table-column>
            <el-table-column prop="key5" label="工单数量"> </el-table-column>
            <el-table-column prop="key6" label="模具编号"> </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog :show-close="false" :visible.sync="dialogVisible4" width="75%">
      <span slot="title" class="custom-dialog-title">
        生产报工
        <i
          class="custom-close-button el-icon-close"
          style="float: right; cursor: pointer"
          @click="handleClose"
        ></i>
      </span>
      <el-row type="flex" align="top">
        <el-col :span="18" style="font-size: 20px">
          <el-form ref="form" :model="form2" label-width="170px" :inline="true">
            <el-form-item label="任务数量:">
              <el-input v-model="form2.key1" placeholder="任务数量" style="width: 70%"> </el-input>
            </el-form-item>
            <el-form-item label="合格数量:">
              <el-input v-model="form2.key2" placeholder="合格数量" style="width: 70%"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="已确认合格数:">
              <el-input
                v-model="form2.key3"
                placeholder="已确认合格数"
                style="width: 70%"
              ></el-input>
            </el-form-item>
            <el-form-item label="已报废数量:">
              <el-input v-model="form2.key4" placeholder="已报废数量" style="width: 70%"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="本次报工合格数:">
              <el-input
                v-model="form2.key5"
                placeholder="本次报工合格数"
                style="width: 70%"
              ></el-input>
            </el-form-item>
            <el-form-item label="本次报废数:">
              <el-input v-model="form2.key6" placeholder="本次报废数" style="width: 70%"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" class="button2" style="height: 35vh" @click="quervbaogong()"
            >确认报工</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { warnMessage } from '@/api';
import code from '@/config';

export default {
  name: 'Home',
  data() {
    return {
      form2: {},
      isScrollingToBottom: false,
      tableData: [
        {
          key1: '生产中',
          key2: 'sO0000032',
          key3: 'B00023033',
          key4: '1265F1外链板本色下料40Cr',
          key5: '1000',
          key6: 'MJ0001',
        },
        {
          key1: '生产中',
          key2: 'sO0000032',
          key3: 'B00023033',
          key4: '1265F1外链板本色下料40Cr',
          key5: '1000',
          key6: 'MJ0001',
        },
        {
          key1: '生产中',
          key2: 'sO0000032',
          key3: 'B00023033',
          key4: '1265F1外链板本色下料40Cr',
          key5: '1000',
          key6: 'MJ0001',
        },
        {
          key1: '生产中',
          key2: 'sO0000032',
          key3: 'B00023033',
          key4: '1265F1外链板本色下料40Cr',
          key5: '1000',
          key6: 'MJ0001',
        },
        {
          key1: '生产中',
          key2: 'sO0000032',
          key3: 'B00023033',
          key4: '1265F1外链板本色下料40Cr',
          key5: '1000',
          key6: 'MJ0001',
        },
        {
          key1: '生产中',
          key2: 'sO0000032',
          key3: 'B00023033',
          key4: '1265F1外链板本色下料40Cr',
          key5: '1000',
          key6: 'MJ0001',
        },
        {
          key1: '生产中',
          key2: 'sO0000032',
          key3: 'B00023033',
          key4: '1265F1外链板本色下料40Cr',
          key5: '1000',
          key6: 'MJ0001',
        },
        {
          key1: '生产中',
          key2: 'sO0000032',
          key3: 'B00023033',
          key4: '1265F1外链板本色下料40Cr',
          key5: '1000',
          key6: 'MJ0001',
        },
      ],
      paigongform: {
        userList: [],
      },
      title: '',
      form: {},
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      shanggongstatus: true,
      warningMessage: '设备调模锁定，请选择寸动模式',
      renwuList: [],
      key: {
        userName: '张三',
        caozuogong: '张三,李四',
      },
      shengchanData: {
        key1: '2039/12983',
        key2: '已调模',
        key3: 'MJ0001',
        key4: '模具一',
      },
      shengchanrenwu: {
        key1: 'SO0000032',
        key2: '1266F1外链板 本色下料40Cr',
        key3: 'B00023032',
        key4: '1000',
        key5: '700',
        key6: '冲压工序',
        key7: '300',
        key8: '10',
      },
    };
  },
  created() {
    this.getWranMes();
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true);
  },
  methods: {
    // 告警信息
    async getWranMes() {
      const res = await warnMessage({
        isIndex: true,
      });
      console.log(res, '首页的告警信息');
    },
    // 确认报工
    quervbaogong() {
      // 数据 this.form2
      console.log('确认报工');
    },
    // 选中的数据
    handleSelectionChange(value) {
      console.log(value);
    },
    handleScroll(event) {
      const A = event.target;
      if (A.clientHeight + A.scrollTop + 2 >= A.scrollHeight) {
        if (!this.isScrollingToBottom) {
          this.isScrollingToBottom = true;
          console.log('滑到底部了');
          // 执行加载更多数据的操作
        }
      } else {
        this.isScrollingToBottom = false;
      }
    },
    // 取消任务
    quxiaorenwu() {
      console.log('取消任务');
    },
    // 打印标识卡
    printrenwu() {
      console.log('打印标识卡');
    },
    // 确认派工
    querpaigong() {
      console.log('确认派工');
    },
    // 删除员工
    delyaungong() {
      this.paigongform.userList.splice(this.paigongform.userList.length - 1, 1);
      console.log('删除员工');
    },
    // 添加员工
    tianjiayaungong() {
      const data = {
        userName: '张三',
      };
      this.paigongform.userList.push(data);
      console.log('添加员工');
    },
    // 派工登录
    dialoglogin() {
      // 数据this.form
      console.log('派工登录');
    },
    // 关闭对话框回调
    handleClose() {
      this.form = {};
      this.dialogVisible = false;
      this.dialogVisible2 = false;
      this.dialogVisible3 = false;
      this.dialogVisible4 = false;
    },
    // 生产报工
    shengchanbaogong() {
      this.dialogVisible4 = true;
      console.log('生产报工');
    },
    // 查看任务
    checkrenwu() {
      this.dialogVisible3 = true;
      console.log('查看任务');
    },
    // 开始生产
    startshengchan() {
      console.log('开始生产');
    },
    // 上工
    shanggong() {
      this.title = '操作上工';
      this.dialogVisible = true;
    },
    // 上工
    dialogshanggong() {
      console.log('上工');
    },
    // 下工
    xiagong() {
      this.title = '操作下工';
      this.dialogVisible = true;
    },
    // 下工
    dialogxiagong() {
      console.log('下工');
    },
    // 派工
    paigong() {
      if (true) {
        this.title = '派工登录';
        this.dialogVisible = true;
        console.log('派工登录');
      } else {
        this.dialogVisible2 = true;
        console.log('派工');
      }
    },
    // 任务查看
    chakan() {
      console.log('任务查看');
    },
    async handleStore() {
      this.$store.dispatch('siteWork/setName', '张三');
      const res = await siteWork.getList({ name: '张三' });
      console.log('打印***res', res);
      if (res.code === code) {
        this.$message.success('获取成功');
      }
    },
  },
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.staffInfo {
  height: 100px;
  padding: 10px;
  border-top: 1px solid #dcdfe6;
  border: 1px solid #dcdfe6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .caption {
    font-size: 20px;
    font-weight: 700;
  }
  .items {
    margin-left: 10px;
    height: 70px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .flx1 {
      margin-top: 10px;
      font-size: 20px;
      font-weight: 700;
    }
  }
  .right .button {
    width: 130px;
    height: 60px;
  }
}

.button {
  height: 100%;
  font-size: 30px;
  line-height: 40px;
}
.button2 {
  height: 100%;
  margin: 10px;
  font-size: 30px;
  line-height: 40px;
}
.custom-dialog-title {
  font-size: 25px; /* 调整关闭按钮的字体大小 */
  cursor: pointer; /* 添加指针样式，以表明它是可点击的 */
}

span.el-checkbox__inner {
  width: 20px;
  height: 20px;
}
.el-form-item__label {
  font-size: 20px;
  font-weight: 600;
}
input.el-input__inner {
  font-size: 20px;
}
.btn-box {
  border-left: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  .button2 {
    height: 110px;
    width: 200px;
  }
}
</style>
